<template>
  <div class="demo">

  </div>
</template>
<script lang="ts">
import { 
  defineComponent ,watch, 
  reactive, ref,toRefs,
  computed,onMounted,
  getCurrentInstance, 
} from 'vue'
import * as utils from '@/utils'
export default defineComponent({
  name: "demo",
  props: {
    demo:{
      type: Number,
      default: 0
    }
  },
  setup (props,{attrs,slots,emit}) {
    const { proxy } = getCurrentInstance() as any;
    const data = reactive({
      name:<number|string> "",
    });
    /**
     * 计算属性
     */
    const demoPlus = computed(()=>{
      return props.demo+1
    })
    /**
     * methods
     */
    const getParent = function(name?){
      let target = proxy?.$parent;
      if(name){
        while (target.$options.name !== name) {
          target = target.$parent
        }
      }
      return target;
    }
    /**
     * watch
     */
    watch(()=>props.demo,(val, oldval)=>{
      if (val !== oldval) {
        data.name = val;
      }
    },{ 
      deep: true ,
      immediate: true
    })
    /**
     * init
     */
    const init = function(){
      
    }
    /**
     * 钩子
     */
    onMounted(init)
    return {
      ...toRefs(data),
      demoPlus,
      getParent
    }
  }
})
</script>

<style lang="scss">

</style>